<!DOCTYPE html>
<html lang="zh-tw">
<head>
<title>Game test</title>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body onkeyup="keyup()">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">TabTest</a>
</div>
<ul class="nav navbar-nav">
</ul>
</nav>
<div id="map"></div>
<div class="container">
<div id="test1">
<span class="label label-info">test1</span>
<textarea name="" id="input1/(\w+)/\u\1/g" class="form-control" rows="20" required="required"></textarea>
</div>
<div id="test2">
<span class="label label-info">test2</span>
<textarea name="" id="input1/(\w+)/\u\1/g" class="form-control" rows="20" required="required"></textarea>
</div>
<div id="test3">
<span class="label label-info">test3</span>
<img src="../svg/FlavorWheel.png" class="img-responsive" alt="Image">
</div>
<div id="test4">
<span class="label label-info">test4</span>
<textarea name="" id="input1/(\w+)/\u\1/g" class="form-control" rows="20" required="required"></textarea>
</div>
<div id="test5">
<span class="label label-info">test5</span>
<textarea name="" id="input1/(\w+)/\u\1/g" class="form-control" rows="20" required="required"></textarea>
</div>
<div id="test6">
<span class="label label-info">test6</span>
<textarea name="" id="input1/(\w+)/\u\1/g" class="form-control" rows="20" required="required"></textarea>
</div>
</div>
<script>
function keyup() {
console.log(event)
}
var tmp;
function setNavListActive() {
d3.select("nav ul li.active").node() &&
d3.select("nav ul li.active").node().classList.remove("active");
d3.select(this).node().parentNode.classList.add("active");
if (d3.select("nav button").style("display") !== "none") navbartoggle();
}
function navbartoggle() {
if (d3.select("nav ul").style("display") === "none")
d3.select("nav ul").style("display", "inline")
else
d3.select("nav ul").style("display", "none")
}
var tmp;
function ShowOnly(container = ".container") {
setNavListActive.call(this);
d3.select(container).selectAll("div").style("display", "none");
d3.select('#' + this.innerText).style("display", "block");
}
function navInit(items = [{ name: "Home", url: "" }, { name: "test2", url: "test" }],
onclickft = "setNavListActive.call(this)") {
if (d3.select("nav button").style("display") !== "none") navbartoggle();
d3.select("nav button").attr("onclick", "navbartoggle()")
var navul = d3.select("nav ul").selectAll("li").data(items)
navul.exit().remove();
navul.enter()
.append("li").append("a").attr("href", d => "#" + d.name)
.attr("onclick", onclickft)
.html(d => d.name);
navul.select("a").attr("href", d => "#" + d.name)
.attr("onclick", onclickft)
.html(d => d.name);
};
navInit([ { name: "Home", url: "" },
{ name: "test1", url: "test1" },
{ name: "test2", url: "test2" },
{ name: "test3", url: "test3" },
{ name: "test4", url: "test4" },
{ name: "test5", url: "test5" },
{ name: "test6", url: "test6" }
]
, "ShowOnly.call(this)"
);
</script>
</body>
</html>
執行畫面：
透過boostrap 和d3來進行單頁式的頁面切換小功能紀錄
iThome鐵人賽
看影片追技術